import React from 'react';
import { connect } from 'react-redux';
import Util from '../../utils/Util';
import { Tool } from '../../utils/Tool';
import {setCommonSystemLoading} from '../../action/Action';
import {SendCodeUser, UserLogin} from "../../action/ActionUser";
import * as DataName from "../../action/DataNameConfig";
import { ForgetPassword } from "../user/PasswordModal";
import { Form, Icon, Input, Button, Spin, message } from 'antd';
const FormItem = Form.Item;
let sendMobile;
class Login extends React.Component {
    constructor(props){
        super(props);
        Util.resetWindowTitle({saasOrg:{dept_name:DataName.SYSTEM_CONFIG_TITLE + " | 登录"}},0);
        this.openForgetPassword=()=>{
            let { dispatch } = this.props;
            dispatch(setCommonSystemLoading(DataName.BASE_MODAL,true));
        }
        // 发送验证码
        this.sendCode=()=>{
            let { dispatch, BaseData } = this.props;
            let codeConfig = BaseData[DataName.CODE_CONFIG];
            /*发送验证码*/
            if(codeConfig.sendCodeFlag){
                if(Util.Phone(sendMobile)){
                    dispatch(SendCodeUser({mobile:sendMobile,type:2}))
                }else{
                    message.error("手机号格式不正确");
                }
            }
        }

        this.onChangeMobile=(e)=>{
            sendMobile = e.target.value;
        }
    }
    componentWillMount(){
        Tool.removeLocalItem('User');
    }
    handleSubmit = (e) => {
        e.preventDefault();
        let {dispatch} = this.props;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                dispatch(setCommonSystemLoading(DataName.FORM_SPIN_LOADING,true));
                dispatch(UserLogin(values))
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        let { CommonSystem, BaseData} = this.props;
        let codeConfig = BaseData[DataName.CODE_CONFIG] || {};
        return (
            <div className="login-page">
                <div className="login-form" >
                    <Spin spinning={CommonSystem[DataName.FORM_SPIN_LOADING] || false} tip="正在登录">
                        <div className="login-logo">
                            <span>{DataName.SYSTEM_CONFIG_TITLE}</span>
                        </div>
                        <p className="logo-desc">科学家在线提供</p>
                        <Form onSubmit={this.handleSubmit}>
                            <FormItem>
                                {getFieldDecorator('mobile', {
                                    rules: [{ required: true, message: '请输入手机号!' }],
                                })(
                                    <Input size="large" prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="手机号" onChange={this.onChangeMobile} />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('valid_code', {
                                    rules: [{ required: true, message: '请输入验证码' }],
                                })(
                                    <Input size="large" prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="text" placeholder="验证码" style={{width: '200px', marginRight: '10px'}} />
                                )}
                                <Button type="primary" className={(codeConfig.activeSend || "") + " send_yzm"} style={{width: '150px',height: '40px'}} onClick={this.sendCode}>{codeConfig.send || ""}</Button>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" size="large" htmlType="submit" className="login-form-button" style={{width: '100%'}}>
                                    登录
                                </Button>
                                {/*<Link onClick={this.openForgetPassword} className="rig_links">忘记密码？</Link>*/}
                            </FormItem>
                        </Form>
                    </Spin>
                </div>
                <ForgetPassword />
            </div>
        );
    }
}
var Main = Form.create()(Login);
export default connect(state=>({
    User: state.User,
    BaseData: state.BaseData,
    CommonSystem: state.CommonSystem
}))(Main);